/**
 * @tabCard : 选项卡
 * @param {*} menuClassName  : 选项卡菜单的类选择器
 * @param {*} textClassName  : 选项卡内容的类选择器
 */
function tabCard(menuClassName, textClassName) {
  let menu = document.querySelectorAll(menuClassName)
  let text = document.querySelectorAll(textClassName)

  //定义变量保存上一个菜单的索引
  let index = 0;

  menu.forEach(function (v, i) {
    v.addEventListener('mouseover', function () {

      //先清除上一个菜单的激活样式
      menu[index].className = ''

      //给当前添加激活样式
      this.className = 'active'


      //先隐藏其他内容
      text[index].className = ''

      //显示当前菜单对应的内容
      text[i].className = 'on'


      //将当前菜单的索引赋值给index
      index = i

    })
  })

}
